<template>
    <div class="main">
        <!-- 商家入驻 -->
        <el-card class="box-card">
            <el-form :inline="true" :model="page" class="demo-form-inline">
                <el-form-item label="商家名称">
                    <el-input v-model="page.storeName" placeholder="请输入商家名称" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-select v-model="page.status" placeholder="请选择">
                        <el-option label="待审核" :value="0" />
                        <el-option label="已拒绝" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">搜索</el-button>
                    <el-button type="primary" @click="reset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" style="width: 100%" ref="multipleTableRef" max-height="600px">
                <el-table-column type="index" width="55" />
                <el-table-column prop="storeName" label="商家名称" align="center" />
                <el-table-column prop="phone" label="电话" align="center" />
                <el-table-column prop="cause" label="拒接原因" align="center" />
                <el-table-column prop="address" label="详细地址" align="center" width="200" />
                <el-table-column prop="storeAp" label="商家资质" align="center">
                    <template #default="scope">
                        <div v-if="scope.row.storeAp">
                            <!-- <img v-for="(item, index) in scope.row.storeAp" style="width: 100px;height: 50px;" :src="item"
                                alt="" :key="index"> -->
                            <img style="width: 100px;height: 50px;" :src="scope.row.storeAp[0]" alt="">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="状态" align="center">
                    <template #default="scope">
                        <span v-if="scope.row.status == 0">待审核</span>
                        <span v-if="scope.row.status == 1">已通过</span>
                        <span v-if="scope.row.status == 2">已拒绝</span>
                    </template>
                </el-table-column>
                <el-table-column label="申请时间" align="center" prop="applyTime">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="160">
                    <template #default="scope">
                        <el-button link type="danger" size="small" @click="delData(scope.row)">删除</el-button>
                        <el-button v-if="scope.row.status == 0" link size="small"
                            @click="toExamine(scope.row)">审核</el-button>
                        <!-- <el-button link size="small" @click="toExamine(scope.row, 1)"
                            v-if="scope.row.status == 0">通过</el-button>
                        <el-button link size="small" @click="toExamine(scope.row, 2)"
                            v-if="scope.row.status == 0">驳回</el-button> -->

                    </template>
                </el-table-column>
            </el-table>
            <Pagination v-if="total != 0" :page="page" :total="total" @pageSizeChanged="handlePageSizeChange"
                @currentPageChanged="handleCurrentPageChange" />
        </el-card>
        <el-dialog v-model="dialogVisible" title="审核" width="30%" :before-close="handleClose">
            <div class="dialogForm">
                <el-form :inline="true" :model="formInline" class="demo-form-inline" ref="dialogFormRef" :rules="rules">
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="formInline.status" class="ml-4">
                            <el-radio label="通过" size="large" :value="1"></el-radio>
                            <el-radio label="驳回" size="large" :value="2"></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="原因" v-if="formInline.status == 2" prop="cause">
                        <el-input v-model="formInline.cause" :rows="2" type="textarea" placeholder="请输入原因" />
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="Ok()">
                        确认
                    </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { getStoreInList, deletestoreInList, updateStatus } from '@/api/merchantManagement.js'
import Pagination from '@/components/pagination/index.vue' // 引入分页组件
import { ElMessage, ElMessageBox } from 'element-plus'
const dialogVisible = ref(false)
const page = reactive({
    storeName: "",
    status: "",
    pageNum: 1,
    pageSize: 10
})
const total = ref(0)
const tableData = reactive([])
const formInline = reactive({
    status: 1,
    cause: '',
})
const dialogFormRef = ref()
const rules = reactive({
    status: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    cause: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
})
const rowData = ref({})

// 弹框关闭
const handleClose = () => {
    dialogVisible.value = false
}
// 审核OK
const Ok = async () => {
    await dialogFormRef.value.validate((valid, fields) => {
        if (valid) {

            let par = {
                id: rowData.value.id,
                status: formInline.status,
                cause: formInline.cause,
            }
            updateStatus(par).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: '操作成功',
                    })
                    dialogVisible.value = false
                    getList()
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })

}


// 搜索
const onSubmit = () => {
    getList()
}
// 重置
const reset = () => {
    page.storeName = "";
    page.status = "";
    page.pageNum = 1;
    page.pageSize = 10;
    getList()
}
// 分页
const handlePageSizeChange = (val) => {
    page.pageNum = 1
    page.pageSize = val
    getList()
}

const handleCurrentPageChange = (val) => {
    page.pageNum = val
    // page.pageSize = 10
    getList()
}

// 审核
const toExamine = (row) => {
    rowData.value = row
    dialogVisible.value = true
    formInline.status = 1
}

// 删除
const delData = (scope) => {
    ElMessageBox.confirm(
        '是否删除该条数据?',
        '删除',
        {
            confirmButtonText: 'OK',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            deletestoreInList(scope.id).then(res => {
                if (res.code == 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功',
                    })
                    getList()
                }
            })

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消',
            })
        })
}

// 获取列表
const getList = () => {
    tableData.length = 0;
    total.value = 0
    getStoreInList(page).then(res => {
        if (res.code == 200) {
            tableData.push(...res.data.list)
            total.value = res.data.total
        }
    })
}




onMounted(() => {
    getList()
})
</script>

<style lang="scss" scoped>
.dialogForm {
    .el-form--inline .el-form-item {
        display: block;
    }
}

.box-card ::v-deep .el-select__wrapper {
    width: 100px;
}

.main {
    padding: 0 5px 5px 5px;
}
</style>